<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>编辑文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-form
          :model="formData"
          :rules="rules"
          ref="myform"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title"></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input v-model="formData.author"></el-input>
          </el-form-item>

          <el-form-item prop="inputtime" label="发布时间">
            <el-date-picker
              v-model="formData.inputtime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="报备时间"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="内容">
            <div id="box"></div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('myform')">保存</el-button>
            <el-button type="success" @click="$router.back()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from "@/api/article";
import mydate from "@/utils/date";

// 引入 富文本编辑器
import E from "wangeditor";
export default {
  data() {
    return {
      formData: {},
      rules: {
        username: [
          { required: true, message: "请输入口碑姓名", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    // 获取列表页面传过来的id
    let myid = parseInt(this.$route.query.id);
    request.getOneArticle({ id: myid }).then((r) => {
      // console.log(r);
      if (r.data.code === 0) {
        this.formData = r.data.list[0];
        this.formData.inputtime = mydate(r.data.list[0].inputtime);
        //   把内容赋值给富文本编辑器
        this.myEditor.txt.html(this.formData.content); // 重新设置编辑器内容
      }
    });
  },

  mounted() {
    //  使用new方法创建一个editor对象
    this.myEditor = new E("#box");

    // 配置 onchange 回调函数
    this.myEditor.config.onchange = (newHtml) => {
      //   console.log("change 之后最新的 html", newHtml);
      this.formData.content = newHtml;
    };

    // 通过editor对象，创建一个编辑器实例
    this.myEditor.create();
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request.editOneArticle(this.formData).then((r) => {
            if (r.data.code === 0) {
              // 添加成功的提示
              this.$message({
                type: "success",
                message: "编辑成功",
              });

              // 添加成功后重置表单
              this.$refs[formName].resetFields();

              this.myEditor.txt.html(''); // 重新设置编辑器内容

              // 添加成功后跳转到列表
              this.$router.push("/index/article/list");
            } else {
              this.$message.error(r.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>